<mat-sidenav-container [class.boxed]="layoutMode">

  <mat-sidenav class="customizer" [position]="customizerSidenavAlign" mode="over" #customizer>
    <stbui-customizer [settings]="settings" (settingsChange)="onSettingsChange($event)"></stbui-customizer>
  </mat-sidenav>

  <mat-sidenav class="sidenav" [position]="sidenavAlign" [mode]="sidenavMode" [opened]="sidenavOpen" #sidenav>
    <stbui-brand [ngClass]="settings.colorClasses.brand"></stbui-brand>
    <stbui-navigation [ngClass]="settings.colorClasses.navigation" [navigationModel]="navigationModel"></stbui-navigation>
  </mat-sidenav>

  <div class="sidenav-container" fxLayout="column">
    <stbui-header [customizer]="customizer" [sidenav]="sidenav" [ngClass]="settings.colorClasses.header" *ngIf="settings.layout.header=='below'"></stbui-header>

    <div class="main-container" #scrollContainer>
      <router-outlet (activate)="onActivate($event, scrollContainer)"></router-outlet>
    </div>

    <stbui-footer *ngIf="settings.layout.footer=='below'"></stbui-footer>
  </div>

</mat-sidenav-container>